<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js</title>

    <style type="text/css">
        button {
            width: 200px;
            height: 40px;
            border-radius: 10px;
            border: 0px;
            margin: 3px;
            color: wheat;
            font-size: 14px;
        }

    </style>
</head>
<body>
<div id="app">
    <counter heading="Likes " color="red"></counter>

    <counter heading="DisLikes " color="blue"></counter>
</div>
<template id="couter">
    <div>
        <button :style="{background:color}" @click="count++">{{heading}} {{color}} {{count}}</button>
    </div>
</template>


<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
    Vue.component('counter', {
        template: '#couter',
        props: ['heading','color'],
        data: function () {
            return {count: 0};
        }
    })
    new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            submitFrom: function (e) {
                this.count++;
            }
        }

    })

</script>
</body>
</html>